﻿@page "/component/feedback/loader"

    <Pager DataSource="@(new List<string>(new[] { 
                             "Demo","With Dimmer","Text Loader","Indeterminated","Inline","Inline Center","Speed","Color","Size",
                             "Inverted","Animiation"
                         }))">
        <Body>
            <Header1 Divider>
                Loader
                <SubHeader>
                    A loader alerts a user to wait for an activity to complete
                </SubHeader>
            </Header1>
            <PresentationPart Title="Demo">
                <Description>
                    <Message State="State.Info">
                        Loaders are hidden unless active or inside an active dimmer.
                    </Message>
                </Description>
                <RunTemplate>
                    <Segment>
                        <Loader Active/>
                    </Segment>  
                </RunTemplate>
                <CodeTemplate>
        @Code.GetCode(@"
```html
<Loader Active/>
```
")
                </CodeTemplate>
            </PresentationPart>
            <PresentationPart Title="With Dimmer">
    <RunTemplate>
        <Segment>
            <Dimmer Active>
                <Loader/>
            </Dimmer>
            <ParagraphDemo/>
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Dimmer Active>
    <Loader/>
</Dimmer>
```
")
    </CodeTemplate>
</PresentationPart>
    <PresentationPart Title="Text Loader">
        <Description>
            A loader can contain text
        </Description>
    <RunTemplate>
        <Segment>
            <Dimmer Active>
                <Loader>In Progress...</Loader>
            </Dimmer>
            <ParagraphDemo/>
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment>
    <Dimmer Active>
        <Loader>In Progress...</Loader>
    </Dimmer>
    <ParagraphDemo/>
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
            <PresentationPart Title="Indeterminated">
                <Description>
                    A loader can show it's unsure of how long a task will take
                </Description>
    <RunTemplate>
        <Segment>
            <Dimmer Active>
                <Loader Indeterminated>Preparing Files...</Loader>
            </Dimmer>
            <ParagraphDemo/>
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment>
    <Dimmer Active>
        <Loader Indeterminated>Preparing Files...</Loader>
    </Dimmer>
    <ParagraphDemo/>
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
            <PresentationPart Title="Inline">
                <Description>
                    Loaders can appear inline with content
                </Description>
    <RunTemplate>
        <Segment>
            I have a loading <Loader Inline Active/> message of here to show
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment>
    I have a loading <Loader Inline Active/> message of here to show
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
                        <PresentationPart Title="Inline Center">
                            <Description>
                                Loaders can appear inline centered with content
                            </Description>
    <RunTemplate>
        <Segment>
            I have a loading <Loader Active Inline Centered/> message of here to show
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment>
    I have a loading <Loader Active Inline Centered/> message of here to show
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
            <PresentationPart Title="Speed">
                <Description>
                    Loaders can appear slow, normal or fast
                </Description>
    <RunTemplate>
        <Loader Inline Active Speed="Speed.Fast" />
        <Loader Inline Active />
        <Loader Inline Active Speed="Speed.Slow" />
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Loader Inline Active Speed=""Speed.Fast"" />
<Loader Inline Active />
<Loader Inline Active Speed=""Speed.Slow"" />
```
")
    </CodeTemplate>
</PresentationPart>
            <PresentationPart Title="Color">
                <Description>
                    Loaders can be different colors
                </Description>
    <RunTemplate>
        <Loader Inline Active Color="Color.Red" />
        <Loader Inline Active Color="Color.Orange" />
        <Loader Inline Active Color="Color.Yellow" />
        <Loader Inline Active Color="Color.Green" />
        <Loader Inline Active Color="Color.Violet" />
        <Loader Inline Active Color="Color.Blue" />
        <Loader Inline Active Color="Color.Purple" />
        <Loader Inline Active Color="Color.Grey" />
        <Loader Inline Active Color="Color.Black" />
        <Loader Inline Active Color="Color.Pink" />
        <Loader Inline Active Color="Color.Olive" />
        <Loader Inline Active Color="Color.Brown" />
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Loader Inline Active Color=""Color.Red"" />
<Loader Inline Active Color=""Color.Orange"" />
<Loader Inline Active Color=""Color.Yellow"" />
<Loader Inline Active Color=""Color.Green"" />
<Loader Inline Active Color=""Color.Violet"" />
<Loader Inline Active Color=""Color.Blue"" />
<Loader Inline Active Color=""Color.Purple"" />
<Loader Inline Active Color=""Color.Grey"" />
<Loader Inline Active Color=""Color.Black"" />
<Loader Inline Active Color=""Color.Pink"" />
<Loader Inline Active Color=""Color.Olive"" />
<Loader Inline Active Color=""Color.Brown"" />
```
")
    </CodeTemplate>
</PresentationPart>
            <PresentationPart Title="Size">
                <Description>
                    Loaders can have different sizes
                </Description>
    <RunTemplate>
        <Loader Inline Active Size="Size.Mini" />
        <Loader Inline Active Size="Size.Tiny" />
        <Loader Inline Active Size="Size.Small" />
        <Loader Inline Active Size="Size.Medium" />
        <Loader Inline Active Size="Size.Large" />
        <Loader Inline Active Size="Size.Big" />
        <Loader Inline Active Size="Size.Huge" />
        <Loader Inline Active Size="Size.Massive" />
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Loader Inline Active Size=""Size.Mini"" />
<Loader Inline Active Size=""Size.Tiny"" />
<Loader Inline Active Size=""Size.Small"" />
<Loader Inline Active Size=""Size.Medium"" />
<Loader Inline Active Size=""Size.Large"" />
<Loader Inline Active Size=""Size.Big"" />
<Loader Inline Active Size=""Size.Huge"" />
<Loader Inline Active Size=""Size.Massive"" />
```
")
    </CodeTemplate>
</PresentationPart>
            <PresentationPart Title="Inverted">
                <Description>
                    Loaders can have their colors inverted.
                    <Message>
                        Loaders will automatically be inverted inside inverted dimmer
                    </Message>
                </Description>
    <RunTemplate>
        <Segment Inverted>
            <Loader Inverted Active />
            <ParagraphDemo />
            <ParagraphDemo />
        </Segment>
        <Segment>
            <Dimmer Active Inverted>
                <Loader />
            </Dimmer>
            <ParagraphDemo />
            <ParagraphDemo />
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Inverted>
    <Loader Inverted Active/>
</Segment>
<Segment>
    <Dimmer Active Inverted>
        <Loader/>
    </Dimmer>
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
            <PresentationPart Title="Animiation">
                <Description>
                    Loaders can also appear in double or elastic animation style. Can be combined with any color or speed.
                </Description>
    <RunTemplate>
        <Segment>
            <Loader Active Animation="Loader.AnimationStyle.Double" Color="Color.Blue" />
            <ParagraphDemo />
            <ParagraphDemo />
        </Segment>
        <Segment>
            <ParagraphDemo />
            <ParagraphDemo />
            <Loader Active Animation="Loader.AnimationStyle.Elastic" Color="Color.Purple" Size="Size.Big" />
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Loader Active Animation=""Loader.AnimationStyle.Double"" Color=""Color.Blue"" />
<Loader Active Animation=""Loader.AnimationStyle.Elastic"" Color=""Color.Purple""  Size=""Size.Big""/>
```
")
    </CodeTemplate>
</PresentationPart>
        </Body>
    </Pager>